@import "../../../styles/fn";

@mixin arrow($size ,$width: 1px) {
  &:before, &:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border: solid transparent;
  }

  &:after {
    border-width: $size - 1px;
  }

  &:before {
    border-width: $size;
  }
}

@mixin arrow-up($size, $color,$background-color,$inner: false, $width: 1px) {
  @include arrow($size, $width);

  &:after, &:before {
    left: 50%;
    bottom: 100%;
    @if $inner == true {
      bottom: 0;
    }
  }

  &:after {
    border-bottom-color: $background-color;
    margin-left: 1px - $size;
  }

  &:before {
    border-bottom-color: $color;
    margin-left: 0 - $size;
  }
}

@mixin arrow-up-right($size, $color,$background-color,$inner: false, $width: 1px) {
  @include arrow($size, $width);

  &:after, &:before {
    left: 80%;
    bottom: 100%;
    @if $inner == true {
      bottom: 0;
    }
  }

  &:after {
    border-bottom-color: $background-color;
    margin-left: 1px - $size;
  }

  &:before {
    border-bottom-color: $color;
    margin-left: 0 - $size;
  }
}

@mixin arrow-down($size, $color, $background-color, $inner: false, $width: 1px) {
  @include arrow($size, $width);

  &:after, &:before {
    left: 50%;
    top: 100%;
    @if $inner == true {
      top: 0;
    }
  }

  &:after {
    border-top-color: $background-color;
    margin-left: 1px - $size;
  }

  &:before {
    border-top-color: $color;
    margin-left: 0 - $size;
  }

}

@mixin arrow-left($size, $color, $background-color, $inner: false, $width: 1px) {
  @include arrow($size, $width);

  &:after, &:before {
    top: 50%;
    right: 100%;
    @if $inner == true {
      right: 0;
    }
  }

  &:after {
    border-right-color: $background-color;
    margin-top: 1px - $size;
  }

  &:before {
    border-right-color: $color;
    margin-top: 0 - $size;
  }

}

@mixin arrow-right($size, $color, $background-color, $inner: false, $width: 1px) {
  @include arrow($size, $width);

  &:after, &:before {
    top: 50%;
    left: 100%;
    @if $inner == true {
      left: 0;
    }
  }

  &:after {
    border-left-color: $background-color;
    margin-top: 1px - $size;
  }

  &:before {
    border-left-color: $color;
    margin-top: 0 - $size;
  }
}

@mixin right-angle-arrow() {
  &:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 13px solid #FFF;
    border-left: 20px solid transparent;
    top: -10px;
    right: 0;
  }
}

.red:after {
  border-top: 50px solid red;
  border-right: 0 solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 50px solid transparent;
}

.orange:after {
  border-top: 0 solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid orange;
  border-left: 0 solid transparent;
}